<!--  -->
<template>
  <a-card :body-style="{ padding: '18px' }" :bordered="false">
    <!-- 顶部卡片组 -->
    <a-descriptions title="项目摘要"></a-descriptions>
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" @click="all">
        <OverviewCard title="全部项目" :total="msg == null ? 0 : msg.allNum">
          <a-tooltip :title="$t('dashboard.analysis.introduce')" slot="action">
            <a-icon type="right" :style="{ fontSize: '20px', color: '#AFAFAF' }" />
          </a-tooltip>
          <img src="@/assets/6221634179780_.pic.jpg" slot="img" style="width: 50px; margin-right: 10px" />
          <a-progress :percent="100" :show-info="false" stroke-color="#3CC2FF" slot="progress" />
        </OverviewCard>
      </a-col>

      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" @click="ongoing">
        <OverviewCard title="进行中的项目" :total="msg == null ? 0 : msg.proceedNum">
          <a-tooltip :title="$t('dashboard.analysis.introduce')" slot="action">
            <a-icon type="right" :style="{ fontSize: '20px', color: '#AFAFAF' }" />
          </a-tooltip>
          <img src="@/assets/6231634179780_.pic.jpg" slot="img" style="width: 50px; margin-right: 10px" />
          <a-progress :percent="onGoingPercent" :show-info="false" stroke-color="#43D882" slot="progress" />
        </OverviewCard>
      </a-col>

      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" @click="close">
        <OverviewCard title="关闭的项目" :total="msg == null ? 0 : msg.closeNum">
          <a-tooltip :title="$t('dashboard.analysis.introduce')" slot="action">
            <a-icon type="right" :style="{ fontSize: '20px', color: '#AFAFAF' }" />
          </a-tooltip>
          <img src="@/assets/6241634179782_.pic.jpg" slot="img" style="width: 50px; margin-right: 10px" />
          <a-progress :percent="closePercent" :show-info="false" stroke-color="#A5B1BE" slot="progress" />
        </OverviewCard>
      </a-col>

      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" @click="start">
        <OverviewCard title="未启用的项目" :total="msg == null ? 0 : msg.unstartNum">
          <a-tooltip :title="$t('dashboard.analysis.introduce')" slot="action">
            <a-icon type="right" :style="{ fontSize: '20px', color: '#AFAFAF' }" />
          </a-tooltip>
          <img src="@/assets/WechatIMG39.png" slot="img" style="width: 50px; margin-right: 10px" />
          <a-progress :percent="startPercent" :show-info="false" stroke-color="#A5B1BE" slot="progress" />
        </OverviewCard>
      </a-col>
    </a-row>
    <!-- 表格 -->
    <a-descriptions title="项目列表"></a-descriptions>
    <index :switchState="switchState" @sendMsg="getMsg" />
  </a-card>
</template>

<script>
import { OverviewCard } from '@/components'
import index from './allItems/index'

export default {
  name: '',
  components: {
    OverviewCard,
    index
  },
  data () {
    return {
      switchState: null,
      totalNumber: null,
      onGoingPercent: 0,
      closePercent: 0,
      startPercent: 0,
      msg: null
    }
  },
  mounted () {},
  methods: {
    all () {
      this.switchState = null
    },
    start () {
      this.switchState = 1
    },
    ongoing () {
      this.switchState = 2
    },
    close () {
      this.switchState = 3
    },
    getMsg (info) {
      this.msg = info
      this.onGoingPercent = parseInt(info.proceedNum * 100 / info.allNum)
      this.closePercent = parseInt(info.closeNum * 100 / info.allNum)
      this.startPercent = parseInt(info.unstartNum * 100 / info.allNum)
    }
  }
}
</script>
<style scoped lang="scss"></style>
